<template>
    <view class="container">
        <view class="filter-section">
            <picker 
                mode="date" 
                @change="onDateChange"
                fields="month"
            >
                <view class="picker-btn">
                    <text>{{ selectedMonth }}</text>
                    <text class="iconfont icon-calendar">&#xe605;</text>
                </view>
            </picker>
            <view class="mood-filter">
                <text 
                    v-for="level in moodLevels" 
                    :key="level.value"
                    class="mood-tag"
                    :class="{ 'active': selectedMoodLevel === level.value }"
                    @tap="filterByMoodLevel(level.value)"
                >
                    {{ level.label }}
                </text>
            </view>
        </view>

        <scroll-view 
            scroll-y 
            class="mood-list"
            @scrolltolower="loadMoreRecords"
        >
            <view 
                v-for="record in filteredRecords" 
                :key="record.id" 
                class="mood-item"
                @tap="navigateToDetail(record.id)"
            >
                <view class="mood-date">
                    <text>{{ record.date }}</text>
                    <text class="mood-level" 
                        :class="{
                            'level-1': record.moodLevel === 1,
                            'level-2': record.moodLevel === 2,
                            'level-3': record.moodLevel === 3,
                            'level-4': record.moodLevel === 4,
                            'level-5': record.moodLevel === 5
                        }">
                        {{ getMoodLevelLabel(record.moodLevel) }}
                    </text>
                </view>
                <text class="mood-description">{{ record.description }}</text>
                <view class="mood-media" v-if="record.images && record.images.length">
                    <image 
                        v-for="(img, index) in record.images.slice(0, 3)" 
                        :key="index" 
                        :src="img" 
                        mode="aspectFill"
                    ></image>
                </view>
            </view>

            <view 
                v-if="filteredRecords.length === 0" 
                class="empty-state"
            >
                暂无心情记录
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            moodLevels: [
                { value: 1, label: '非常糟糕' },
                { value: 2, label: '糟糕' },
                { value: 3, label: '一般' },
                { value: 4, label: '好' },
                { value: 5, label: '非常好' }
            ],
            selectedMonth: '选择月份',
            selectedMoodLevel: null,
            records: [],
            page: 1,
            pageSize: 10,
            hasMore: true
        }
    },
    computed: {
        filteredRecords() {
            return this.records.filter(record => {
                const monthMatch = this.selectedMonth === '选择月份' || 
                    record.date.startsWith(this.selectedMonth);
                const levelMatch = this.selectedMoodLevel === null || 
                    record.moodLevel === this.selectedMoodLevel;
                return monthMatch && levelMatch;
            });
        }
    },
    onLoad() {
        this.fetchRecords();
    },
    methods: {
        async fetchRecords() {
            if (!this.hasMore) return;

            try {
                const result = await this.$api.mood.getMoodRecords({
                    page: this.page,
                    pageSize: this.pageSize
                });

                if (result.records.length < this.pageSize) {
                    this.hasMore = false;
                }

                this.records = [...this.records, ...result.records];
                this.page++;
            } catch (error) {
                uni.showToast({
                    title: '加载记录失败',
                    icon: 'none'
                });
            }
        },
        onDateChange(e) {
            this.selectedMonth = e.detail.value;
        },
        filterByMoodLevel(level) {
            this.selectedMoodLevel = this.selectedMoodLevel === level ? null : level;
        },
        navigateToDetail(id) {
            uni.navigateTo({
                url: `/pages/history/detail?id=${id}`
            });
        },
        loadMoreRecords() {
            if (this.hasMore) {
                this.fetchRecords();
            }
        },
        getMoodLevelLabel(level) {
            const moodLevel = this.moodLevels.find(l => l.value === level);
            return moodLevel ? moodLevel.label : '';
        }
    }
}
</script>

<style scoped>
.container {
    background-color: #F8F8F8;
    height: 100vh;
    padding: 24px 0;
}

.filter-section {
    padding: 0 24px;
    margin-bottom: 24px;
}

.picker-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mood-filter {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

.mood-tag {
    background-color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mood-tag.active {
    background-color: #1AAD19;
    color: white;
}

.mood-list {
    height: calc(100vh - 200px);
}

.mood-item {
    background-color: white;
    margin: 0 24px 16px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mood-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mood-level {
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 12px;
}

.level-1 { background-color: #FF4D4F; color: white; }
.level-2 { background-color: #FF7A45; color: white; }
.level-3 { background-color: #FAAD14; color: white; }
.level-4 { background-color: #52C41A; color: white; }
.level-5 { background-color: #1AAD19; color: white; }

.mood-description {
    display: block;
    margin-bottom: 12px;
    color: #333;
}

.mood-media {
    display: flex;
    gap: 8px;
}

.mood-media image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.empty-state {
    text-align: center;
    color: #999;
    margin-top: 50px;
}
</style> 